﻿<%@ Page Language="C#" MasterPageFile="~/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Toolkit.Web.Examples.Panel.Index" %>
<%@ Import Namespace="Toolkit.Web" %>
<%@ Import Namespace="Toolkit.Web.ViewComponents" %>
<%@ Import Namespace="Toolkit.Web.ViewComponents.Panel" %>

<asp:Content ContentPlaceHolderID="Title" runat="server">
    Panels
</asp:Content>

<asp:Content ContentPlaceHolderID="StyleSheetIncludes" runat="server">
    <link href="/Content/StyleSheets/Panel.css" rel="stylesheet" />
</asp:Content>

<asp:Content ContentPlaceHolderID="PageContent" runat="server">
    
    <div class="section">
        <h2>Simple</h2>
        <%:
            this.Toolkit()
                .Panel()
                .PrimaryHeader(writer => "Primary Title")
                .Content(writer => "Content")
        %>
    </div>

    <div class="section">
        <h2>Common Functionality</h2>
        <%:
            this.Toolkit()
                .Panel(new { @style = "max-width:500px;" })
                .PrimaryHeader(writer => "Primary Title")
                .SecondaryHeader(writer => "<a href='#'>Edit</a> | <a href='#'>Settings</a>")
                .Content((template, writer) => {
                    writer.Write("Content<br />");
                    writer.Write("<br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.");
                    writer.Write("<br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.");
                }, new { @style = "max-height:100px;min-height:50px;overflow:auto;" })
                .Collapsible(true)
        %>
    </div>

    <div class="section">
        <h2>Initially Collapsed</h2>
        <%:
            this.Toolkit()
                .Panel(new { @style = "max-width:500px;" })
                .PrimaryHeader(writer => "Primary Title")
                .SecondaryHeader(writer => "<a href='#'>Edit</a> | <a href='#'>Settings</a>")
                .Content((template, writer) => {
                    writer.Write("Content<br />");
                    writer.Write("<br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.");
                    writer.Write("<br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.");
                }, new { @style = "max-height:100px;min-height:50px;overflow:auto;" })
                .Collapsible(true, true)
        %>
    </div>

    <div class="section">
        <h2>Events</h2>
        <%:
            this.Toolkit()
                .Panel(new { @style = "max-width:500px;" })
                .PrimaryHeader(writer => "Primary Title")
                .SecondaryHeader(writer => "<a href='#'>Edit</a> | <a href='#'>Settings</a>")
                .Content((template, writer) =>
                {
                    writer.Write("Content<br />");
                    writer.Write("<br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.");
                    writer.Write("<br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.<br />This is content.");
                }, new { @style = "max-height:100px;min-height:50px;overflow:auto;" })
                .Collapsible(true)
                .ClientEventHandlers(handlers =>
                {
                    handlers.OnBeforeCollapse = "onBeforeCollapse";
                    handlers.OnBeforeExpand = "onBeforeExpand";
                })
        %>
    </div>


</asp:Content>

<asp:Content ContentPlaceHolderID="JavaScriptIncludes" runat="server">
    <script src="/Scripts/jqkit.min.js"></script>
    <script src="/Scripts/jqkit.components.min.js"></script>
    <script>
        function onBeforeExpand() {
            try { console.log('before expand - ' + $(this).attr('data-vc-id')); } catch(error) {};
        }
        function onBeforeCollapse() {
            try { console.log('before collapse - ' + $(this).attr('data-vc-id')); } catch(error) {};
        }
    </script>
</asp:Content>